{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block scripts %}
    <script type="text/javascript">
        function sendInfo(obj) {
            var id = $(obj).attr("id");
            $('#complaint_id').val(id);
        }
        function level1(student_id) {
            var new1 = document.getElementById('list1');
            var childs = new1.childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                if (childs[i].nodeName != 'BUTTON') {
                    new1.removeChild(childs[i]);
                }
            }
            $.post("/getComplained", {student_id: student_id}, function (result) {
                $.each(result, function (i, item) {
                    var newa = document.createElement('a');
                    newa.className = "list-group-item";
                    newa.href = '';
                    newa.setAttribute('data-toggle', "modal");
                    newa.setAttribute('data-target', '#myModal');
                    newa.innerHTML = '<li>Student:' + item[0] + '</li>';
                    newa.innerHTML += '<li>Complain Content:' + item[1] + '</li>';
                    newa.innerHTML += '<li>State:' + item[2] + '</li>';
                    newa.innerHTML += '<li>Complain Date:' + item[3] + '</li>';
                    newa.innerHTML += '<li>Past Days:' + item[5] + '</li>';
                    newa.innerHTML += "<button onclick='sendInfo(this)' id=" + item[4] + ">Handle</button>";
                    new1.appendChild(newa);
                });
            });
            var tab1 = document.getElementById('becomplained');
            var old1 = document.getElementById('table1');
            var new3 = document.getElementById('list1');
            new3.style.display = "block";
            old1.style.display = "none";
        }
        function return1() {
            var tab1 = document.getElementById('becomplained');
            var new1 = document.getElementById('table1');
            var old1 = document.getElementById('list1');
            var nodes = old1.childNodes;
            new1.style.display = "table";
            old1.style.display = "none";
        }
    </script>
    {{ super() }}
{%- endblock scripts %}
{% block page_content %}

    <div>

        {% if current_user.is_authenticated %}
            <div class="col-md-12">
                <label class="col-md-6">Username:{{ username }}</label>
            </div>

            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#becomplained" data-toggle="tab">Students of be complained</a></li>
                <li><a href="#handled" data-toggle="tab">handled complaints</a></li>
                <li><a href="#noimproved" data-toggle="tab">no improved</a></li>
            </ul>
            <div class="tab-content">
                <div id="becomplained" class="tab-pane active">
                    <br>
                    <table class="table table-striped " id="table1">
                        <thead>
                        <tr>
                            <th>StudentID</th>
                            <th>Name</th>
                            <th>Be complained count</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for complain in complain_list %}
                            <tr>
                                <td> {{ complain[0] }}</td>
                                <td onclick="level1({{ complain[0] }})"><a href="#">{{ complain[1] }}</a></td>
                                <td> {{ complain[2] }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="list-group" id="list1" style="display: none;">
                        <button class="btn-success" onclick="return1()">Return</button>
                    </div>
                </div>

                <div class="tab-pane fade" id="handled">
                    <br>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>content</th>
                            <th>state</th>
                            <th>Handle date</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for complained in handled_list %}
                            <tr>
                                {% for info1 in complained %}
                                    <td>{{ info1 }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="noimproved">
                    <br>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Content</th>
                            <th>State</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for handle in noimprovved_list %}
                            <tr>
                                {% for info1 in handle %}
                                    <td>{{ info1 }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Handle the complaint...</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="/handle" role="form" method="POST">
                        <div class="modal-body">
                            <label>Please input the words to the student : </label>
                            <input type="text" class="hide" name="complaint_id" id="complaint_id" value="0"/>
                            <textarea rows="10" cols="30" class="form-control" name="words"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close
                            </button>
                            <button type="submit" class="btn btn-primary">
                                Send
                            </button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}